<template>
	<view>
		<u-navbar :is-back="true" title="活动详情"></u-navbar>
		<view class="huodong-banner">
			<image src="../../../static/demo/4.jpg" class="banner-img"></image>
		</view>
		<view class="huodong-xinxi">
			<view class="huodong-title">【活动】“一本书·益起读”线下读书公益活动“</view>
			<view class="huodong-renshu u-flex">
				<view class="baomingrenshu">
					报名人数：<text class="color-red">50</text>人
				</view>
				<view class="liulanrenshu">
					浏览人数：<text class="color-red">1250</text>人
				</view>
				<view class="baomingrenshu">
					线下活动
				</view>
			</view>
			<view class="shijian u-flex">
				<image src="../../../static/img/acitivity/shijian.png" class="shijian-icon"></image> 2021/5/9 13:30-17:30
			</view>
			<view class="shijian u-flex">
				<image src="../../../static/img/acitivity/weizhi.png" class="shijian-icon"></image> 上海黄浦区xx街xx号14栋2021室
			</view>
		</view>
		<view class="fabupindao">
			<image src="../../../static/img/acitivity/logo_03.jpg" class="logo-img"></image>
			<view class="fabupindao-cont">
				<view class="fabupindao-name">会明官方活动发布频道</view>
				<view class="fabupindao-text">此账号为会明官方活动策划发布频道</view>
			</view>
		</view>
		<view class="xiangqing-tab">
			<view class="xiangqing-tab-list">排行榜</view>
			<view class="xiangqing-tab-list  active">参赛选手</view>
			<view class="xiangqing-tab-list">活动详情</view>
		</view>
		<!-- 排行榜 -->
		<view class="baomingchengyuan" style="display: none;">
			<view class="baomingchengyuan-cell">
				<view class="xuliehao">
					1
				</view>
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">
					<view>大领子AAA</view>
					<view class="bianhao">
						<view class="u-font-24">编号：01895</view>
						<view class="piaoshu u-font-24"><text class="color-red">312456</text>票</view>
					</view>
				</view>
				<view class="chakanzhuye">查看详情</view>
			</view>
			<view class="baomingchengyuan-cell">
				<view class="xuliehao">2</view>
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">
					<view>大领子AAA</view>
					<view class="bianhao">
						<view class="u-font-24">编号：01895</view>
						<view class="piaoshu u-font-24"><text class="color-red">312456</text>票</view>
					</view>
				</view>
				<view class="chakanzhuye">查看详情</view>
			</view>
			<view class="baomingchengyuan-cell">
				<view class="xuliehao">3</view>
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">
					<view>大领子AAA</view>
					<view class="bianhao">
						<view class="u-font-24">编号：01895</view>
						<view class="piaoshu u-font-24"><text class="color-red">312456</text>票</view>
					</view>
				</view>
				<view class="chakanzhuye">查看详情</view>
			</view>
			<view class="baomingchengyuan-cell">
				<view class="xuliehao">4</view>
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">
					<view>大领子AAA</view>
					<view class="bianhao">
						<view class="u-font-24">编号：01895</view>
						<view class="piaoshu u-font-24"><text class="color-red">312456</text>票</view>
					</view>
				</view>
				<view class="chakanzhuye">查看详情</view>
			</view>
			<view class="baomingchengyuan-cell">
				<view class="xuliehao">5</view>
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">
					<view>大领子AAA</view>
					<view class="bianhao">
						<view class="u-font-24">编号：01895</view>
						<view class="piaoshu u-font-24"><text class="color-red">312456</text>票</view>
					</view>
				</view>
				<view class="chakanzhuye">查看详情</view>
			</view>	
		</view>
		<!-- 参赛选手 -->
		<view class="cansaixuanshou">
			<view class="csxs-search">
				<view class="search-box">
					<input type="text" placeholder="输入用户名或编号" class="search-input" />
					<text class="search-btn">搜索</text>
				</view>
				<view class="sort-btn">
					<text class="sort-btn-text">最新</text>
					<text class="sort-btn-text active">最热</text>
				</view>
			</view>
			<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-tag">
						<image src="../../../static/demo/1.jpg" class="toux-img"></image>
						<view class="name">李贴贴</view>
						<view class="piaoshu">13456票</view>
					</view>
					<view class="bianhao">编号：0125</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-tag">
						<image src="../../../static/demo/3.jpg" class="toux-img"></image>
						<view class="name">胡二哥</view>
						<view class="piaoshu">13456票</view>
					</view>
					<view class="bianhao">编号：0125</view>
					<image src="../../../static/img/acitivity/bofang.png" class="bofang-btn"></image>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
		</view>
		<!-- 活动详情 -->
		<view class="xiangqing-cont" style="display: none;">
			<view class="content">
				【活动】“一本书·益起读”线下读书公益活动“【活动】“一本书·益起读”线下读书公益活动“【活动】“一本书·益起读”线下读书公益活动“【活动】“一本书·益起读”线下读书公益活动“
			</view>
			<image src="../../../static/demo/2.jpg" class="xuanchuantu" mode="widthFix"></image>
		</view>
		
		<view class="xiangqing-foot">
			<u-button shape="circle" hover-class="none" :hair-line="false" class="lijibaoming">我要参与</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					{
						title: '北国风光，千里冰封，万里雪飘',
						image: '../../../static/img/cansai1.png',
					},
					{
						title: '望长城内外，惟余莽莽',
						image: '../../../static/img/cansai2.png',
					},
					{
						title: '大河上下，顿失滔滔',
						image: '../../../static/img/cansai1.png',
					},
					{
						title: '欲与天公试比高',
						image: '../../../static/img/cansai2.png',
					},
					{
						title: '须晴日，看红装素裹，分外妖娆',
						image: '../../../static/img/cansai1.png',
					},
					{
						title: '江山如此多娇，引无数英雄竞折腰',
						image: '../../../static/img/cansai1.png',
					},
					{
						title: '惜秦皇汉武，略输文采',
						image: '../../../static/img/cansai2.png',
					},
					{
						title: '唐宗宋祖，稍逊风骚',
						image: '../../../static/img/cansai2.png',
					},
					{
						title: '一代天骄，成吉思汗',
						image: '../../../static/img/cansai2.png',
					},
					{
						title: '只识弯弓射大雕',
						image: '../../../static/img/cansai2.png',
					},
					{
						title: '俱往矣，数风流人物，还看今朝',
						image: '../../../static/img/cansai1.png',
					},
				]
			};
		},
		onLoad() {
			this.addRandomData();
		},
		onReachBottom() {
			this.loadStatus = 'loading';
			// 模拟数据加载
			setTimeout(() => {
				this.addRandomData();
				this.loadStatus = 'loadmore';
			}, 1000)
		},
		methods: {
			addRandomData() {
				for(let i = 0; i < 10; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ebebeb;
	}
.huodong-banner{
	width: 100%;
	height: 285rpx;
	.banner-img{
		width: 100%;
		height: 100%;
	}
}
.huodong-xinxi{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 20rpx;
	padding: 30rpx;
	.huodong-title{
		font-size: 30rpx;
	}
	.huodong-renshu{
		margin: 20rpx 0 10rpx;
		.baomingrenshu{
			color: #565656;
			font-size: 24rpx;
		}
		.liulanrenshu{
			color: #565656;
			font-size: 24rpx;
			margin: 0 50rpx;
		}
	}
}
.shijian{
	font-size: 24rpx;
	color: #515151;
	padding-top: 20rpx;
	.shijian-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}
}
.fabupindao{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 20rpx;
	padding: 35rpx 40rpx;
	display: flex;
	.logo-img{
		width: 100rpx;
		height: 100rpx;
	}
	.fabupindao-cont{
		flex: 1;
		margin-left: 30rpx;
		.fabupindao-name{
			font-size: 28rpx;
		}
		.fabupindao-text{
			color: #c3c3c3;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
	
}
.xiangqing-tab{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 20rpx;
	display: flex;
	align-items: center;
	padding: 35rpx 0;
	.xiangqing-tab-list{
		width: 50%;
		text-align: center;
		font-size: 28rpx;
		color: #9d9d9d;
	}
	.active{
		color: #515151;
	}
}
.xiangqing-cont{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx 30rpx 150rpx;
	margin: 0 20rpx;
	.content{
		color: #8d8d8d;
		font-size: 26rpx;
		line-height: 50rpx;
	}
}
.xiangqing-foot{
	background-color: #e7e7e7;
	padding: 20rpx 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	.lijibaoming{
		margin: 0 150rpx;
		background-color: #2ea34a;
		color: #FFFFFF;
	}
}
.baomingchengyuan{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 20rpx;
	padding-bottom: 150rpx;
	.scroll-Y{
		height: 500rpx;
	}
	.baomingchengyuan-cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 55rpx;
		border-bottom: 1px solid #ebebeb;
		.xuliehao{
			font-size: 60rpx;
			color: #ff9600;
		}
		.touxiang{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}
		.baoming-name{
			flex: 1;
			margin: 0 20rpx;
			color: #515151;
			font-size: 28rpx;
			.bianhao{
				display: flex;
				align-items: center;
				margin-top: 10rpx;
				color: #8a8a8a;
				.piaoshu{
					margin-left: 30rpx;
				}
			}
		}
		.chakanzhuye{
			font-size: 24rpx;
			color: #898989;
		}
	}
}
.cansaixuanshou{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 20rpx;
	padding-bottom: 150rpx;
	.csxs-search{
		display: flex;
		padding: 30rpx 35rpx;
		align-items: center;
		justify-content: space-between;
		.search-box{
			display: flex;
			align-items: center;
			border: 1px solid #b5b5b5;
			border-radius: 10rpx;
			padding: 4rpx 0;
			.search-input{
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				padding-left: 20rpx;
			}
			.search-btn{
				font-size: 26rpx;
				padding: 0 20rpx;
				border-left: 1px solid #b5b5b5;
			}
		}
	    .sort-btn{
			border: 1px solid #b5b5b5;
			border-radius: 10rpx;
			background-color: #ededed;
			overflow: hidden;
			.sort-btn-text{
				padding: 0 20rpx;
				height: 74rpx;
				display: inline-block;
				line-height: 74rpx;
			}
			.active{
				background-color: #515151;
				color: #FFFFFF;
			}
		}
	}
}
.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 5px;
		.toux-img{
			width: 45rpx;
			height: 45rpx;
			border-radius: 100px;
		}
		.name{
			color: #515151;
			margin: 0 15rpx;
			font-size: 24rpx;
			flex: 1;
		}
		.piaoshu{
			font-size: 24rpx;
		}
	}
	.bianhao{
		background-color: rgba(255,255,255,0.6);
		position: absolute;
		top: 26rpx;
		right: 20rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		border-radius: 6rpx;
		z-index: 9;
	}
	.bofang-btn{
		width: 85rpx;
		height: 85rpx;
		position: absolute;
		left: 63px;
		top: 63px;
	}
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
